﻿<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>响应式网站在线检测预览工具responsiveTester</title>
<meta name="Update Author" content="红狼哥"/>
<meta name="Version" content="1.0.2.120965825"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
/*----- 重置所有元素样式 -----*/
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,menu,table,tbody,tfoot,thead,th,tr,td,video,tt,u,ul,var{background:transparent;font-size:100%;margin:0;padding:0;border:0;outline:0;}
blockquote,q{quotes:none;}
table,table td{padding:0;border:none;border-collapse:collapse;border-spacing:0;}
img{vertical-align:top;}
embed{vertical-align:top;}
/*预置全局样式*/
html{height:100%;}
body{height:100%;font:12px/2em "Microsoft YaHei";cursor:default;-webkit-transition: all 300ms ease;-moz-transition: all 300ms ease;-ms-transition: all 300ms ease;-o-transition: all 300ms ease;transition: all 300ms ease;}
a{color:#222;text-decoration:none;}
a:hover{color:#e00;}
ol,ul,li{list-style:none;}
pre{overflow:auto;}
hr{height:1px;border:0;border-top:1px solid #ccc;margin:0 0 1.5em 0;padding:0;}
label{display:inline-block;}
legend{font-weight:bold;}
button{border:none;cursor:pointer;}
q:before,q:after{content:'';}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;} 
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} 
caption,th{text-align:left;}
abbr,acronym {border:0;font-variant:normal;} 
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{vertical-align:top;padding:2px;background:#fff;border:1px #ccc solid;}
input:focus,select:focus,textarea:focus{background:#f8f8f8;}

.header{position:fixed;top:0;left:0;right:0;z-index:9999;height:60px;line-height:60px;background:#2e78c1;box-shadow:0 2px 3px rgba(0,0,0,.3);}
.logo{float:left;font-size:20px;margin-left:20px;color:#fff;}
.logo sup{padding-left:5px;font-size:9px;}
.userUrl{float:right;padding:15px 10px 0 0;line-height:30px;}
.userUrl #getURL{padding:6px 10px;border:none;}
.userUrl #getURL:focus{background:#eee;}
.userUrl #btn{padding:4px 10px;background:#f90;color:#fff;font-size:14px;font-family:"Microsoft YaHei";border:none;cursor:pointer;}

#responsive{float:left;padding:20px 10px 0;}
#responsive li {float:left;border:none;padding:0 10px;opacity: 0.4;color:#fff;-webkit-transition: all 200ms ease-in-out 0s;-moz-transition: all 200ms ease-in-out 0s;-o-transition: all 200ms ease-in-out 0s;transition: all 200ms ease-in-out 0s;}
#responsive li:hover {opacity: 1;}
#responsive li.active {	opacity: 1;}
#responsive a{display:block;cursor:pointer;background:url(img/devices.png) no-repeat;}
#responsive a.desktopportrait{width:28px;height:24px;}
#responsive a.desktopportrait-1600{width:28px;height:24px;}
#responsive a.desktopportrait-1920{width:28px;height:24px;}
#responsive a.tabletlandscape{background-position:-37px -3px;width:22px;height:18px;margin-top:2px;}
#responsive a.tabletportrait{background-position:-69px -1px;width:18px;height:22px;margin-top:1px;}
#responsive a.mobilelandscape{background-position:-97px -5px;width:18px;height:14px;margin-top:5px;}
#responsive a.mobileportrait{background-position:-125px -3px;width:14px;height:18px;margin-top:3px;}
#responsive a.qr{background-position:-149px 0;width:24px;height:24px;margin-top:0px;}
#responsive #desktop{transform:scale(.9);}
#responsive #desktop-1920{transform:scale(1.1);}
#responsive #qr{position:relative;}
#responsive #qr i{display:none;position:absolute;z-index:2;top:-10px; left:50px;background:#fff;box-shadow:1px 1px 3px rgba(0,0,0,.3);width:128px;height:128px;}
#responsive #qr i img{width:100%;}
#responsive #qr i:before{ content:""; position: absolute; top:17px;left:-9px; border:5px solid;
	 border-color: transparent #fff transparent transparent ;}
#responsive .active i{display:block !important;}

.content{margin-top:60px;padding:20px 0 40px;overflow:hidden;}
	#showURL{margin-bottom:20px;padding:10px 0;line-height:1.5em;text-align:center;font-size:18px;}
/* footer */
.footer{padding-top:20px;padding-bottom:20px;background:#ddd;overflow:hidden;}
.copy{float:left;padding-left:50px;background:url("images/footerLogo.png") no-repeat 0 3px;background-size:auto 20px;color:#666;}
	#viewportContainer {
	/* initial width only   */
		margin: auto ;
		background:#f5f5f5;
		/* trying different values to fix iOS issues with iFrame busting loose and wrecking the joint.   */
		overflow:hidden;
		-webkit-overflow-scrolling: touch;
		-webkit-transition: all 200ms ease-in-out 0s;
		-moz-transition: all 200ms ease-in-out 0s;
		-o-transition: all 200ms ease-in-out 0s;
		transition: all 200ms ease-in-out 0s;
		box-shadow:5px 5px 5px rgba(0,0,0,.25);
		border:6px solid #e5daca;
		border-radius:20px;
		}
	iframe {
		background-color: white;
		position:absolute;
		margin:auto;
		border:2px solid rgba(50,50,50,.1);
		overflow-x:hidden;
		-webkit-overflow-scrolling: touch;
		-webkit-transition: all 200ms ease-in-out 0s;
		-moz-transition: all 200ms ease-in-out 0s;
		-o-transition: all 200ms ease-in-out 0s;
		transition: all 200ms ease-in-out 0s;
		}
	/* /// Details   */
	#device-detail {
		position: relative;
		z-index: 1000;
		text-indent:-9999px;
		display: block;
		margin: auto;
		-webkit-transition: all 0 ease-in-out 200ms;
		-moz-transition: all 0 ease-in-out 200ms;
		-o-transition: all 0 ease-in-out 200ms;
		transition: all 0 ease-in-out 200ms;
		background:#e2e2e2;
		cursor:pointer;
		}
	#device-detail a{display:block;}
	#device-detail:before{position:absolute;top:50%;left:50%;z-index:2;content:'';margin:-11px 0 0 -11px;width:16px;height:16px;border:3px solid #ccc;border-radius:5px;}
	.iphone-detail {
		top: -53px;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		}
	.iphone-detail:before{margin:-8px 0 0 -8px !important;width:10px !important;height:10px !important;}
	.iphone-l-detail {
		top: -235px;
		left: 350px;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		}
	.iphone-l-detail:before{margin:-8px 0 0 -8px !important;width:10px !important;height:10px !important;}
	.ipad-detail {
		top: -70px;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		}

	.ipad-l-detail {
		top: -512px;
		left: 555px;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		}
	.desktop-detail {
		background:none !important;
		border-bottom: 100px solid #bbb;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		height: 0;
		width: 160px;
		position:relative;
		}
	.desktop-detail:before{display:none;}
	.desktop-detail:after{position:absolute;bottom:-110px;left:0;z-index:11;content:'';margin:0 -25px;padding:0 25px;width:100%;height:10px;background:#ccc;border-radius:10px 10px 0 0;}

	/* /// Devices sizes   */
/* iphone 320 x 480 */
	#viewportContainer.iphone {
		padding:65px 35px;
		}
	.iphone, .iphone iframe {
		width:360px;
		height:640px;
		}
	.iphone-l {
		padding:35px 65px;
		border-radius: 20px;
		}
	.iphone-l, .iphone-l iframe {
		width:640px;
		height:360px;
		}
	/* ipad 1024 x 768 */
	.ipad {
		padding:80px;
		}
	.ipad, .ipad iframe {
		width:768px;
		height:1024px;
		}
	.ipad-l {
		padding: 80px;
		}
	.ipad-l, .ipad-l iframe {
		width:1024px;
		height:768px;
		}
	/* desktop 1280 x 800 */
	.desktop {
		padding:30px;
		background:#222 !important;
		border-radius: 10px;
		border:none !important;
		border-bottom:70px solid #ddd !important;
		}
	.desktop, .desktop iframe {
		width:1280px;
		height:800px;
		}
	/* desktop 1600 x 900 */
	.desktop-1600 {
		padding:30px;
		background:#222 !important;
		border-radius: 10px;
		border:none !important;
		border-bottom:70px solid #ddd !important;
		}
	.desktop-1600, .desktop-1600 iframe {
		width:1600px;
		height:900px;
		}
	/* desktop 1920 x 1024 */
	.desktop-1920 {
		padding:30px;
		background:#222 !important;
		border-radius: 10px;
		border:none !important;
		border-bottom:70px solid #ddd !important;
		}
	.desktop-1920, .desktop-1920 iframe {
		width:1920px;
		height:1024px;
		}
</style>
<script type="text/javascript">
//Demonstrating Responsive Design
function gUrl(name)
	{
			 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			 var r = window.location.search.substr(1).match(reg);
			 if(r!=null)return  unescape(r[2]); return null;
	}
$(function() {
			var givenURL = gUrl("url");
      if (!givenURL.match(/^http/)) {
            givenURL = 'http://' + givenURL;
        };
	$('#displayframe').attr('src', givenURL);
	$('#device-detail').click(function() {
		 $('#displayframe').attr('src', '/');
	});
	$('#iphone').click(function() {
		$("#responsive li").removeClass("active");
		$(this).addClass("active");
		$('#viewportContainer').attr('class', 'iphone');
		$('#device-detail').attr('class', 'iphone-detail');

	});
	$('#iphone-l').click(function() {			  
		$("#responsive li").removeClass("active");
		$(this).addClass("active");
		$('#viewportContainer').attr('class','iphone-l');
		$('#device-detail').attr('class', 'iphone-l-detail');
	});
	$('#ipad').click(function() {
		$("#responsive li").removeClass("active");
		$(this).addClass("active");
		$('#viewportContainer').attr('class', 'ipad');
		$('#device-detail').attr('class', 'ipad-detail');
	});
	$('#ipad-l').click(function() {
		$("#responsive li").removeClass("active");
		$(this).addClass("active");
		$('#viewportContainer').attr('class', 'ipad-l');
		$('#device-detail').attr('class', 'ipad-l-detail');
	});
	$('#desktop').click(function() {
		$("#responsive li").removeClass("active");
		$(this).addClass("active");
		$('#viewportContainer').attr('class', 'desktop');
		$('#device-detail').attr('class', 'desktop-detail');
	});
	$('#desktop-1600').click(function() {
		$("#responsive li").removeClass("active");
		$(this).addClass("active");
		$('#viewportContainer').attr('class', 'desktop-1600');
		$('#device-detail').attr('class', 'desktop-detail');
	});
	$('#desktop-1920').click(function() {
		$("#responsive li").removeClass("active");
		$(this).addClass("active");
		$('#viewportContainer').attr('class', 'desktop-1920');
		$('#device-detail').attr('class', 'desktop-detail');
	});
	$('#qr').click(function() {
		$("#responsive li").removeClass("active");
		$(this).addClass("active");
		QR = "<img src='http://qr.liantu.com/api.php?w=128&m=10&text=" + givenURL + "'/>";
		$("#qr i").html(QR);
		$("#qr").attr("title",givenURL + "的二维码");
	});
	function updateframe() {
      if (!givenURL.match(/^http/)) {
            givenURL = 'http://' + givenURL;
        };
		$('#displayframe').attr('src', givenURL);
		$('#showURLContainer').html('<a href="'+givenURL+'" target="_blank">'+givenURL.replace('http://','')+'</a>');
		QR = "<img src='http://qr.liantu.com/api.php?w=128&m=10&text=" + givenURL + "'/>";
 		$("#qr i").html(QR);
		$("#qr").attr("title",givenURL + "的二维码");
  };
    $("#btn").click(function() {
  		givenURL=$("#getURL").val();
		updateframe();
	});
	$('#getURL').keypress(function(e){
      if(e.which == 13){
	   givenURL=$("#getURL").val();	  
       updateframe();
       }
     }).focus(function(){
		 $(this).val('');
	 }).placeholder();
	updateframe();
});

//window.screen.width;
$.fn.toActive = function(callBack){
	return this.each(function(i) { 
		if(!$(this).hasClass('active')){
			$(this).addClass('active').siblings().removeClass('active');
			if($.isFunction(callBack)){
				callBack($(this));
			};
		}
	});
};
</script>
</head>
<body>
<div class="wrap">
	<div class="header">
		<div class="logo">响应式检测工具<sup>V 1.0.2</sup></div>
		<div class="userUrl">
			<input type="text" name="load" id="getURL" placeholder="输入网址马上体验！">
			<input type="submit" value="预览" id="btn">
		</div>
		<ul id="responsive">
			<li id="iphone" title="手机竖屏" data-tips="3_t"><a class="mobileportrait" title="手机竖屏 (360x640)"></a></li>
			<li id="iphone-l" title="手机横屏" data-tips="3_t" ><a class="mobilelandscape" title="手机横屏 (640x360)"></a></li>
			<li id="ipad" title="平板竖屏" data-tips="3_t" ><a class="tabletportrait" title="平板竖屏 (768x1024)"></a></li>
			<li id="ipad-l" title="平板横屏" data-tips="3_t" ><a class="tabletlandscape" title="平板横屏 (1024x768)"></a></li>
			<li id="desktop" class="active" title="电脑版(PC)" data-tips="3_t"><a class="desktopportrait" title="电脑版(1280x800)"></a></li>
			<li id="desktop-1600" title="电脑版(PC)" data-tips="3_t"><a class="desktopportrait-1600" title="电脑版(1600x900)"></a></li>
			<li id="desktop-1920" title="电脑版(PC)" data-tips="3_t"><a class="desktopportrait-1920" title="电脑版(1920x1024)"></a></li>
			<li id="qr" title="二维码" data-tips="3_t"><i></i><a class="qr" title="扫描二维码"></a></li>
		</ul>
	</div>
	<div class="content">
		<div id="showURL"><span id="showURLContainer"></span>网站响应式预览</div>
		<div id="viewportContainer" class="desktop">
			<iframe id="displayframe" name="displayframe" height="480" width="320" src=""></iframe>
		</div>
		<div id="device-detail" class="desktop-detail" title="home"></div>
	</div>
	<div class="footer">
		<div class="copy">
			&copy; <script type="text/javascript">var dt=new Date();var s=dt.getFullYear();document.write(s);</script> 红狼哥倾情更新
		</div>
	</div>
</div>
</body>
</html>

